<template>
  <div class="search-music">
    <div class='search-content'>
      <div class='search-box'>
        <div class='search-input'>
          <el-input class='search' placeholder="搜索" icon="search" v-model="searchConent" :on-icon-click="handleIconClick" @keyup.enter.native='handleIconClick'>
          </el-input>
          <el-button @click='goToHome'>返回首页</el-button>
          <transition name='slide-fade'>
            <div class='songs-lists' v-if="isSongList">
              <el-menu theme='dark' :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
                <el-menu-item index="1">单曲</el-menu-item>
              </el-menu>
              <ul class='song-sheet'>
                <li v-for='(items, index) in musicList'>
                  <el-row :gutter="5">
                    <el-col :span="1">
                      <div class="grid-content bg-purple">
                        {{index+1}}
                      </div>
                    </el-col>
                    <el-col :span="11">
                      <div class="grid-content bg-purple">
                        {{items.name}} <i v-if='items.alias.length > 0'> 《{{items.alias[0]}}》</i>
                      </div>
                    </el-col>
                    <el-col :span="7">
                      <div class="grid-content bg-purple">
                        {{items.artists[0].name}}
                      </div>
                    </el-col>
                    <el-col :span="3">
                      <div class="grid-content bg-purple">
                        {{items.album.name}}
                      </div>
                    </el-col>
                    <el-col :span="2">
                      <div class="grid-content bg-purple">
                        <i class='iconfont icon-bofangqi3' @click='clickSong(items.id, items.album.picUrl, items.artists[0].name, items.name)'></i>
                      </div>
                    </el-col>
                  </el-row>
                </li>
              </ul>
            </div>
          </transition>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'hello',
  data () {
    return {
      isSongList: false, // 搜索音乐列表是否隐藏
      activeIndex: '1', // 单曲
      searchConent: '',
      songList: [], // 歌曲列表 播放列表
      musicList: [] // 接口音乐列表
    }
  },
  mounted () {
    // 初始化中先读取，cook数据
    console.log('搜索页面初始化：', JSON.parse(localStorage.getItem('cacheSongList')))
    if (JSON.parse(localStorage.getItem('cacheSongList')) !== null) {
      this.songList = JSON.parse(localStorage.getItem('cacheSongList'))
    }
  },
  methods: {
    handleSelect (key, keyPath) {
      console.log(key, ':', keyPath)
    },
    handleIconClick () {
      // 获取搜索列表
      this.searchConent === '' ? this.isSongList = false : this.isSongList = true
      let _this = this
      let _searchConent = this.searchConent
      this.$http.get('/search?keywords=' + _searchConent + '&limit=99').then(function (response) {
        console.log(response)
        _this.musicList = response.data.result.songs
      }).catch(function (error) {
        console.log(error)
      })
    },
    clickSong (id, pic, artistsName, songName) {
      var _this = this
      // 歌曲url获取
      this.$http.get('/music/url?id=' + id).then(function (response) {
        // 创建obj对象，之后将obj添加至songlist歌单
        let obj = {id: id, url: response.data.data[0].url, pic: pic, author: artistsName, title: songName}
        _this.songList.push(obj)
        // 子组件对父组件传值
        _this.$emit('childrenSongChanged', obj)
        // 在这里加入缓存
        if (localStorage) {
          localStorage.setItem('cacheSongList', JSON.stringify(_this.songList))
        }
      }).catch(function (error) {
        console.log(error)
      })
    },
    goToHome () {
      this.$router.push('/')
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
@import '../assets/fonts/iconfont.css';
.slide-fade-enter-active {
  transition: all .3s ease;
}
.slide-fade-leave-active {
  transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
}
.slide-fade-enter, .slide-fade-leave-to
/* .slide-fade-leave-active for below version 2.1.8 */ {
  transform: translateX(10px);
  opacity: 0;
}
.search{
  transition: all 2s;
  -webkit-transition: all 2s;
}
.search-music{
  position:absolute;
  top:0;
  left:0;
  bottom:0;
  right:0;
}
.search-box{
  width:100%;
  height:100%;
  display: table;
  text-align:center;
}
.search-header{
  height:70px;
  width: 100%;
  position: absolute;
  color:#eee;
}
.search-content{
  position: absolute;
  top:90px;
  bottom: 150px;
  left:8%;
  right:8%;
}
.search-list-box{
  height:90%;
  overflow-y: auto;
  margin:30px 0 0;
}
.search-list-box .iconfont.icon-bofangqi3{
  font-size:20px;
  width:20px;
  height:20px;
  cursor: pointer;
}
.search-list-box .iconfont.icon-bofangqi3:hover{
  color:rgb(0,200,255);
}
.song-sheet{
  font-size:12px;
  overflow-y: auto;
  padding:0;
  height:330px;
}
.song-sheet span{
  display: inline-block;
}
.song-sheet i{
  font-style: normal;
  font-size:16px;
  color:#999;
  line-height:30px;
  cursor:pointer;
}
.song-sheet i:hover{
  color:rgba(0,200,255,0.76)
}
.song-sheet li{
  list-style: none;
  line-height:30px;
  height:30px;
  overflow:hidden;
}
.song-sheet li:nth-child(2n){
  background-color: rgba(255,255,255,0.1);
}
.el-input__inner{
  background:none;
  color:#eee;
}
.audio-box{
  min-width: 520px;
  position: absolute;
  height: auto;
  bottom: 10px;
  left: 0;
  right:10px;
  left:10px;
}
.search-input{
  display:table-cell;
  vertical-align:middle;
}
.search.el-input{
  width:50%;
  background:none;
  color:#ccc;
}
.search.el-input input{
  background:none;
  color:#ccc;
}
.songs-lists{
  background:rgba(0,200,255,0.15);
  margin:20px auto 0;
}
.songs-lists ul{
  background:none;
}
.songs-lists ul li{
  color:#eee;
}
</style>
